<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta content="black" name="apple-mobile-web-app-status-bar-style">
	<meta content="telephone=no" name="format-detection">
	<meta content="no-cache" http-equiv="Cache-Control">
	<title>源之东方</title>
	<link href="__STATIC__/css/shopin.css" rel="stylesheet"/>
	<style>
		.cut_down{
			margin: 10px 0;
			background: white;
			padding: 3px 0;
		}
		#kanjia{
			margin: 10px 10vw;
			background: white;
		}
		#down_price{
			margin:5px 38px; 
		}
		.cut p{
			display: inline-block;
			width: 49vw;
			margin-top:5px; 
		}
		
	</style>
</head>

<body>
<div class="header">
	<div class="left"><a href="javascript:;" class="a-back"><span>返回</span></a></div>
	<div class="center">
		<h1>确认订单</h1>
	</div>
</div><!--//头部结束-->

<div class="content">
	<div class="order-buy">
		<div id="j_address" class="address order-address">
			{if condition="!$address"}
			<p>请添加收获地址</p>
			{else /}
			<div class="info">
				收货人：<p class="name">{$address.consignee}</p>
				<p class="phone">{$address.mobile}</p>
			</div>
			<div class="details">收货地址：{$address.province}{$address.city}{$address.country}{$address.detail}</div>
			<input type="hidden" name="address" value="{$address.id}">
			{/if}
		</div><!-- //收货地址 -->
		<div class="order-list mt">
			<div class="small">
				{if (substr($goodsInfo.url, 0, 1) !== 'h')}
				<div class="p"><a href="product.html">
					<img src="http://img.58bjcf.com/{$goodsInfo.url}"></a>
				</div>
				{else}
				<div class="p"><a href="product.html">
					<img src="{$goodsInfo.url}"></a>
				</div>
				{/if}
				<div class="d">
					<a href="#"><h3 class="d-title clamp">{$goodsInfo.description}</h3></a>
					<div class="d-main">
						<div class="sub flex">
							<span style="text-align: left;width: 54vw;margin-right: 2vw;">{$goodsInfo.name}{$goodsInfo.color}{$goodsInfo.size}  × 1</span>
							<span class="price" style="width: 12vw;">
										{if ($is_vip)}
											￥{$goodsInfo.member_price}
										{else}
											￥{$goodsInfo.price}
                                        {/if}
							</span>
						</div>
					</div>
				</div>
			</div><!-- //单品结束 -->
		</div><!-- //购买商品 -->

		<div class="coupon mt">
			<div class="b-box options">
				<p class="title">选择快递</p>
				<div class="conts">
					<div class="arrow">
						{if condition="$is_sale"}
						<span class="j_multi">优惠包邮</span>
						<select name="express" class="order-select j_select">
							<option value="free" selected>优惠包邮</option>
						</select>
						{else /}
						<span class="j_multi">快递选择</span>
						<select name="express" id="express" class="order-select j_select">
							<option value="0">请选择</option>
							<option value="1">中通快递</option>
                            <option value="2">顺丰快递</option>
                            <option value="3">源之东方商城配送</option>
						</select>
						{/if}
					</div>
				</div>
			</div>
			<div class="b-box options" onclick="addCart()">
				<p class="title">使用优惠券</p>
				<div class="conts">
					<div class="arrow">
						<span class="j_multi" id="usecoupon">选择优惠券</span>
					</div>
				</div>
			</div>
			<!-- <div class="b-box options" onclick="addCart()">
				<p class="title">使用优惠券</p>
				<div class="conts">
					<div class="arrow">
						<span class="j_multi">选择使用优惠券</span>
						<select name="express" class="order-select j_select">
							<option value="0">不使用</option>
							{volist name="Coupon" id="v" key="k"}
								{if $k<=5}
									<option value="{$k}">使用{$k}张</option>
								{/if}
							{/volist}
						</select>
					</div>
				</div>
			</div> -->
		</div><!-- //优惠券 -->
		<div class="list mt">
			<div class="b-box options">
				<p class="title cell">邮费说明</p>
				<div class="conts">
					<div class="arrow">
						{if condition="$is_sale"}
						<p>优惠包邮</p>
						{else /}
						<p>中通 3元/单(江浙沪)</p>
						<p>顺丰 8元/单(江浙沪)</p>
						<p>中通 6元/单(其他非港澳台)</p>
						<p>顺丰 16元/单(其他非港澳台)</p>
						{/if}
					</div>
				</div>
			</div>
		</div><!-- //优惠券 -->
		<div class="postage mt">
			<div class="b-box options">
				<p class="title">邮费</p>
				<div class="conts">
					<div class="arrow">
						{if condition="$is_sale"}
						<span id="express_money">优惠包邮</span>
						{else /}
						<span id="express_money">待选择</span>
						{/if}
					</div>
				</div>
			</div>
		</div><!-- //邮费 -->
		<div class="bottom-bar mt">
			<div class="total-price">
				<div class="compute">
					<p class="realPay"><span class="subtotal">合计：￥</span><strong class="price" id="total_price">{$goodsInfo.price}</strong></p>
					<p class="text">共1件， {if condition="$is_sale"} 优惠包邮  {else /} 含邮费 <span class="f-red" id="choice_express">【待选择】</span> 元 {/if}</p>
				</div>
				<div class="submitOrder">
					<input type="button" class="btn btn-pay j_submit" value="付款" id="to_pay">
				</div>
			</div>
		</div>
	</div>
</div>
<div class="m-sku">
	<div class="sku-mask"></div>
	<div class="sku-panel">
		<div class="sku-top"><span class="sku-close">X</span></div>
		<div class="sku-content" id="buy">
	        <div class="row-title">选择</div>
	        <div class="sku-row" id="j_color">
	        	<a class="sku-item disabled" href="javascript:;" have="0" cid="0" onclick="change(this)" id="nouse">不使用</a>
	        	{volist name="Coupon" id="v" key="k"}
	        		<a class="sku-item" href="javascript:;" have="0" cid="{$v.id}" onclick="change(this)" name="use">100</a>
				{/volist}
	        </div>
        </div>
		<div class="sku-footer">
			<a href="javascript:addCart();" class="btn-cancel">加入购物车</a>
			<a href="javascript:buyNow();" class="btn-submit">立即购买</a>
		</div>
	</div>
</div>
<script src="__STATIC__/js/zepto.min.js"></script>
<script src="__STATIC__/js/base.min.js"></script>
<script src="__STATIC__/js/shopin.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>
    coupon = new Array();
    j = 0;
    function change(e){
        var cid = e.getAttribute('cid');
        var have = e.getAttribute('have');
        if (cid == 0) {
            document.getElementById('total_price').innerText = price;
            var use = document.getElementsByName('use');
            for (var i = 0; i < use.length; i++) {
                use[i].style.backgroundColor = '';
                use[i].setAttribute('have',0);
            }
            coupon = [];
            j = 0;
            document.getElementById('usecoupon').innerText = '使用'+j+'张';
            if (have == 0) {
                e.style.backgroundColor  = 'red';
                e.setAttribute('have',1);
            }else{
                e.style.backgroundColor  = '';
                e.setAttribute('have',0);
            }
        }else{
            var nouse = document.getElementById('nouse');
            nouse.style.backgroundColor = '';
            nouse.setAttribute('have',0);

            if (have == 0) {
                if (j>4) {
                    alert('最多使用5张优惠券');
                    return false;
                }
                coupon[j] = cid;
                e.style.backgroundColor  = 'red';
                e.setAttribute('have',1);
                j++;
                document.getElementById('usecoupon').innerText = '使用'+j+'张';
                if (price - 100*j > 0) {
                    document.getElementById('total_price').innerText = price - 100*j;
                }else{
                    document.getElementById('total_price').innerText = 0;
                }
            }else{
                e.style.backgroundColor  = '';
                e.setAttribute('have',0);
                j--;
                document.getElementById('usecoupon').innerText = '使用'+j+'张';
                document.getElementById('total_price').innerText = price - 100*j;
                for (var i = 0; i < coupon.length; i++) {
                    if (coupon[i] == cid) {
                        coupon.splice(i,1);
                    }
                }
            }
            console.log(coupon);
        }
    }
    //使用优惠券
    function addCart(){
        var express = $('select[name="express"]').find('option:selected').val();

        if(express == 0) {
            alert('请选择您所寄出的快递公司');
            return false;
        }
        if($('.sku-panel').hasClass('sku-move')){
            var colorValue = $("#j_color").find(".on").text();
            var sizeValue = $("#j_size").find(".on").text();
            if(colorValue != null && sizeValue == null){
                skuOpen();
            };
            if(colorValue == null && sizeValue != null){
                skuOpen();
            };
            if(colorValue == null && sizeValue == null){
                skuOpen();
            };
            if(colorValue != null && sizeValue != null){
                var getCartNum = parseInt($('.go-cart .icon').text());
                setCartNum = getCartNum + 1;
                $('.go-cart .icon').text(setCartNum);
                skuClose();
            };
        }else{
            skuOpen();
        };
    };
    //open SKU
    function skuOpen (){
        $('.sku-panel').addClass('sku-move');
        $('.sku-mask, .sku-panel').css('display','block');
    };
    //close SKU
    $('.sku-mask, .sku-close').on('tap', function() {
        $('.sku-panel').addClass('sku-back');
        setTimeout("skuClose()", 300 )
    });
    function skuClose(){
        $('.sku-panel').removeClass('sku-back')
        $('.sku-panel, .sku-mask').css('display','none');
    };
    //初始选中第一项
    //$(".j_select").each(function(){
    //	var $val = $(this).find("option:first").text();
    //	$(this).prev('.j_multi').text($val);
    //});
    var arr = ['上海','浙江','江苏'];
    $(".j_select").change(function(){
        var value = $(this).find("option:selected").text();
        $(this).prev('.j_multi').text(value);
        {if condition="$address"}
        var value = $(this).find("option:selected").val();
        switch (value) {
            case '1' : // 中通快递
                if($.inArray("{$address.province}", arr) !== -1) {
                    $('#express_money').text('3元');
                    $('#choice_express').text(3);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 3 * 100)/100);
                } else {
                    $('#express_money').text('6元');
                    $('#choice_express').text(6);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 8 * 100)/100);
                }
                break;
            case '2' : // 顺丰快递
                if($.inArray("{$address.province}", arr) !== -1) {
                    $('#express_money').text('8元');
                    $('#choice_express').text(8);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 8 * 100)/100);
                } else {
                    $('#express_money').text('16元');
                    $('#choice_express').text(16);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 16 * 100)/100);
                }
                break;
            case '3' : // 商城配送
                if($.inArray("{$address.province}", arr) !== -1) {
                    $('#express_money').text('3元');
                    $('#choice_express').text(3);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 3 * 100)/100);
                } else {
                    $('#express_money').text('6元');
                    $('#choice_express').text(6);
                    $('#total_price').text((parseFloat({$goodsInfo.price}) * 100 + 6 * 100)/100);
                }
                break;
            default : // 未选择
                $('#express_money').text('待选择');
                $('#choice_express').text('待选择');
                break;
        }
        {/if}
            price = document.getElementById('total_price').innerText;
        });
    $('#j_address').on('tap', function(event) {
        window.location.href="/myself/address.html"
    });
    $('#to_pay').click(function () {
        // 需要携带地址信息和 快递信息(中通/顺丰)
        var address = $('#j_address input[name="address"]').val();
        if(!address) {
            alert('请选择您的收获地址');
            return false;
        }
        var express = $('select[name="express"]').find('option:selected').val();

        if(express == 0) {
            alert('请选择您所寄出的快递公司');
            return false;
        }
        var price = document.getElementById('total_price').innerText;
        // var goodslist = new Array();
        // // 需要携带地址信息和 快递信息(中通/顺丰)
        // goodslist[0] = {$goodsInfo->product_id};
        // goodslist[1] = {$goodsInfo->id};
        // goodslist[2] = 1;
        var goodlist = [{
            pid:{$goodsInfo->id},
             gid:{$goodsInfo->product_id},
             num :1
    }];
        console.log(JSON.stringify(goodlist));
        var value = document.getElementById('express').value;

        $.ajax({
            type : 'post',
            url : '/payone',
            data: {
                'address_id' : address,
                'express' : express,
                'goodslist' : JSON.stringify(goodlist),
                'express' : value,
                'coupon' : JSON.stringify(coupon)
            },
            success : function (data) {
                console.log(data);
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，公众号的唯一标识
                    timestamp: data.timeStamp, // 必填，生成签名的时间戳
                    nonceStr: data.nonceStr, // 必填，生成签名的随机串
                    signature: data.paySign,// 必填，签名
                    jsApiList: [
                        'chooseWXPay'
                    ] // 必填，需要使用的JS接口列表

                });
                wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
                    wx.chooseWXPay({
                        timestamp: data.timeStamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                        nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                        package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=\*\*\*）
                        signType: data.signType, // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                        paySign: data.paySign, // 支付签名
                        success: function (res) {
                            window.location.href = '/';
                        }
                    });
                });
            },
            error : function (e) {
//                            console.log(e);
            }
        });

    });
</script>
</body>
</html>
